<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>求存者主页</title>
		<script src="../../../static/js/axios.min.js"></script>
		<script src="../../../static/js/vue.js"></script>
		<script src="../../../static/js/jquery.min.js"></script>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="../../../static/css/skill.css" rel="stylesheet" type="text/css">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid"> 
			    <div class="navbar-header"> 
			        <a class="navbar-brand" href="#">Newseeker</a> 
			    </div> 
			    <ul class="nav navbar-nav navbar-right"> 
			        <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
			        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
			    </ul> 
			</div> 
		</nav>
		<div id="skill" class="main">
			<div class="menu list-group">
			  <a href="#" class="list-group-item" style="margin-bottom: 80px; width: 80%; text-align: center;" onclick="getSkillByType('电脑使用')">电脑使用</a>
			  <a href="#" class="list-group-item" style="margin-bottom: 80px; width: 80%; text-align: center;" onclick="getSkillByType('编程学习')">编程学习</a>
			  <a href="#" class="list-group-item" style="margin-bottom: 80px; width: 80%; text-align: center;" onclick="getSkillByType('健康生活')">健康生活</a>
			  <a href="#" class="list-group-item" style="margin-bottom: 80px; width: 80%; text-align: center;" onclick="getSkillByType('美妆护肤')">美妆护肤</a>
			  <a href="#" class="list-group-item" style="margin-bottom: 80px; width: 80%; text-align: center;" onclick="getSkillByType('投资理财')">投资理财</a>
			</div>

			<div class="show">
				<div class="searchbar">
					<span class="searchlogo glyphicon glyphicon-search"></span>
				    <input placeholder="请输入搜索的内容" id="search" v-model="keywords" onclick="getSkillByTitle()"/>
				</div>
				<div class="list">
					<div class="content" v-for="(skill, index) in allSkills">
						<img src="../../../static/img/back.jpg" />
						<div>
							<a @click="getNewSkill(skill.id)">{{skill.name}}</a>
							<div>
								<span class="glyphicon glyphicon-thumbs-up"></span>12
								<span class="glyphicon glyphicon-expand"></span>34
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="personal"></div>
		</div>
		
		<script>
			var vue2 = new Vue({
				el: '#skill',
				data: {
					allSkills: [],
					keywords: ""
				},
				mounted: function() {
					this.getSkills();
				},
				methods: {
					getSkills: function() {
						var self = this;
						axios({
							method: 'post',
							url: 'http://localhost:8001/skill/getSkillsTop/1/20',
							data: {}
						}).then(function (response) {
							var jsonString = JSON.stringify(response.data);
							var jsonObj = JSON.parse(jsonString);
							self.allSkills = response.data.rows;
						})
					},
					getNewSkill: function(id) {
						window.location.href = 'http://localhost:8001/skill/getSkillInfoPage/' + id;
					}
				}
			})
			
			function getSkillByTitle() {
				axios({
					method: 'post',
					url: 'http://localhost:8001/skill/getSkillsTop/1/20',
					data: {
						title: vue2.keywords
					}
				}).then(function (response) {
					var jsonString = JSON.stringify(response.data);
					var jsonObj = JSON.parse(jsonString);
					vue2.allSkills = jsonObj.data.rows;
				})
			}
			
			function getSkillByType(skillType) {
				axios({
					method: 'post',
					url: 'http://localhost:8001/skill/getSkillsTop/1/20',
					data: {
						type: skillType
					}
				}).then(function (response) {
					var jsonString = JSON.stringify(response.data);
					var jsonObj = JSON.parse(jsonString);
					vue2.allSkills = jsonObj.data.rows;
				})
			}
		</script>
	</body>
</html>
